import { Tabs, WhiteSpace, Accordion, List } from 'antd-mobile';
import React from "react"
import Mycss from "./style/index.module.css"
import imgSrc from "./img/music.png"
import imgSrc2 from "./img/最近播放.png"
import imgSrc3 from "./img/下载 (2).png"
import imgSrc4 from "./img/我的电台.png"
import imgSrc5 from "./img/我的收藏.png"
import imgSrc6 from "./img/我的喜欢.png"
import imgSrc7 from "./img/1.jpg"
import imgSrc8 from "./img/2.jpg"
import imgSrc9 from "./img/3.jpg"
import imgSrc10 from "./img/4.jpg"
import imgSrc11 from "./img/5.jpg"
import imgSrc12 from "./img/6.jpg"
import imgSrc13 from "./img/7.jpg"
import imgSrc14 from "./img/8.jpg"
import imgSrc15 from "./img/9.jpg"
import imgSrc16 from "./img/10.jpg"
import imgSrc17 from "./img/11.jpg"
import imgSrc18 from "./img/12.jpg"
import imgSrc19 from "./img/13.jpg"
// import Playlist from './playlist';

class Demo extends React.Component {
  constructor() {
    super()
    this.state = {
      playlist: [],
      zuijinbofang:""
    }
  }
  //获取用户的歌单
  componentWillMount() {
    // const id=this.props.location.id
    const id=localStorage.getItem("userid")
    fetch(`http://106.12.79.128:666/user/playlist?uid=${id}`,{
      credentials:'include'
    })
      .then(body => body.json())
      .then(res => {
        this.setState({
          playlist: res.playlist
        })
        // console.log(this.state.playlist)
      })
      //获取用户最近播放列表
      fetch(`http://106.12.79.128:666/user/record?uid=${id}&type=0`,{
        credentials:'include'
      })
      .then(body=>body.json())
      .then(res=>{
       this.setState({
         zuijinbofang:res.allData.length
       })
      })
  }
  renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
    </div>);


  jump(playlistid) {
    const id=this.props.location.id
    this.props.history.push({pathname:"/playlist",playlistid,id})
  }
  jumps(){
    this.props.history.push({pathname:"/latestplay"})
  }
  gogogo(){
    this.props.history.push({pathname:"/personfm"})
  }
  render() {
    const tabs = [
      { title: <img src={imgSrc15} alt="" className={Mycss.imgs} onClick={this.gogogo.bind(this)}/> },
      { title: <img src={imgSrc19} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc7} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc8} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc14} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc17} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc13} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc9} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc12} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc16} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc11} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc10} alt="" className={Mycss.imgs} /> },
      { title: <img src={imgSrc18} alt="" className={Mycss.imgs} /> }
    ];
    return (
      <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />} tabBarUnderlineStyle={{ border: "none" }}>
          {this.renderContent}
        </Tabs>
        <WhiteSpace />
        <ul className={Mycss.uls}>
          <li className={Mycss.lis}><img className={Mycss.imgssr} src={imgSrc} alt="" />本地音乐</li>
          <hr />
          <li className={Mycss.lis}><img className={Mycss.imgssr} src={imgSrc2} alt="" onClick={this.jumps.bind(this)}/>最近播放<div className={Mycss.zuijinbofang}>({this.state.zuijinbofang})</div></li>
          <hr />
          <li className={Mycss.lis}><img className={Mycss.imgssr} src={imgSrc3} alt="" />下载管理</li>
          <hr />
          <li className={Mycss.lis}><img className={Mycss.imgssr} src={imgSrc4} alt="" />我的电台</li>
          <hr />
          <li className={Mycss.lis}><img className={Mycss.imgssr} src={imgSrc5} alt="" />我的收藏</li>
        </ul>
        <div className="Mycss.space"></div>
        <div style={{ marginTop: 0, marginBottom: 0, fontWeight: "bolder" }}>
          <Accordion defaultActiveKey="0" className="Mycss.my-accordion" onChange={this.onChange}>
            <Accordion.Panel header={`收藏的歌单(${this.state.playlist.length})`}>
              <List className="Mycss.my-list">
                <List.Item>
                  <ul>
                    {this.state.playlist.map((item, index) => 
                   <li className={Mycss.wrap} key={index} onClick={this.jump.bind(this,item.id)}>
                        <img src={item.coverImgUrl} alt="" className={Mycss.gedantouxiang} />
                      <div className={Mycss.gelist}>{item.name}
                        <div className={Mycss.shuliang}>{item.trackCount}首 by {item.creator.nickname}</div>
                      </div>
                    </li>
                    )}
                  </ul>
                </List.Item>
              </List>
            </Accordion.Panel>
          </Accordion>
        </div>
      </div>
    );
  }
}

export default Demo
